<template>
  <div>

    <!-- 头部 -->
    <!-- 添加fixed属性，让头部固定在顶部 -->
    <van-nav-bar fixed>
      <template #left>
        <img src="../../assets/toutiao_logo.4653c8be.png"
             alt=""
             class="logo">
      </template>
      <template #right>
        <van-icon name="search"
                  color="#fff"
                  size="0.48rem"
                  @click="$router.push({path:'/search'})" />
      </template>
    </van-nav-bar>
    <!-- 选项列表 -->
    <van-tabs v-model="active"
              animated
              sticky
              offset-top="1.226667rem"
              @click="btn">
      <van-tab v-for="obj,index in list"
               :key="index"
               :name="obj.id"
               :title="obj.name ">
        <!-- 刷新的是数据，所以要把数据抱起来 -->
        <van-pull-refresh v-model="isLoading"
                          @refresh="onRefresh">
          <!-- 底部加载更多 -->
          <!-- 网页打开就发起了2次请求，第一次是一进来就要获取数据，第二次是：list组件挂载到页面上，第一页的数据还没请求回来，list没有高度，但是list认为触底了，所以马上执行了onload
                    解决：添加v-if,只有请回来数据，才套list显示 -->
          <van-list v-model="loading"
                    v-if="articleList.length>0"
                    :finished="finished"
                    finished-text="没有更多了"
                    offset="100"
                    @load="onLoad">
            <van-cell />

            <Articlelist :arr="articleList"
                         @action="actionFn"
                         @detail="detailFn"
                         @changeChannel="changeChannelFn"></Articlelist>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 加号位置 -->
    <!-- 右侧的编辑频道的小图标 -->
    <van-icon name="plus"
              size="0.373334rem"
              class="moreChannels"
              @click="show=true" />
    <!-- 弹出层组件 -->
    <!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭） -->
    <van-popup v-model="show"
               :close-on-click-overlay="false"
               class="edit_wrap">
      <div class="popup-container">

        <!-- 弹出层的头部区域 -->
        <van-nav-bar title="频道管理">
          <template #right>
            <van-icon name="cross"
                      size="0.373334rem"
                      color="white"
                      @click="closePop" />
          </template>
        </van-nav-bar>

        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <ChannelEdit :list="list"
                       :unchannelList="unchannelList"
                       @edit="editFn"
                       @add="addFn"
                       @changeChannel="changeChannelFn"
                       ref='channels'></ChannelEdit>
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
// 需求：点击频道，切换数据
// 点击频道时，需要获取到频道id
// v-tab的name默认时索引，所以我换成了ID，方便btn事件拿到频道id

import { channelListAPI, articlesListAPI, articleDislikeAPI, articleReportsAPI, allChannelListAPI, updateChannelListAPI } from '@/api'

// 引入文章列表组件
import ChannelEdit from './components/ChannelEdit.vue'
import Articlelist from './components/ArticleList.vue'
// 引入时间处理函数
import { formatTime } from '@/utils/date'
export default {
  data () {
    return {
      show: false, // 编辑频道-遮罩层是否显示
      finished: false, // 数据是否全部加载完成
      loading: false, // 底部加载更多状态
      isLoading: false, // 下拉状态
      // 选项列表(用户已选)
      list: [],
      // 文章列表
      articleList: [],
      // 所有频道列表
      allChannelList: [],
      active: 0,
      page: 1, // 显示第几页数据
      channel_id: 0// 频道ID,默认时0(推荐频道的数据)
    }
  },
  components: {
    Articlelist,
    ChannelEdit
  },
  async created () {
    // 一进来就要有数据，进行铺页面的选项
    // 接口用频道_用户已选（不同的用户，选项卡不同）
    const [, res] = await channelListAPI()
    console.log(res)
    // 所有频道数据
    const [, res1] = await allChannelListAPI()
    this.allChannelList = res1.data.data.channels
    console.log(res1)
    this.list = res.data.data.channels
    // 默认打开时，就获取到文章列表数据
    this.getArticlesListAPI()
  },
  methods: {
    formatTime: formatTime,
    // 拿文章列表数据
    async getArticlesListAPI () {
      const [, res] = await articlesListAPI(
        {
          channel_id: this.channel_id,
          page: this.page

        }
      )
      console.log(res)
      console.log(res.data.data.results)
      // 对获取回来的时间进行预处理,把时间转化为多久多久前的形式
      res.data.data.results.forEach((item) => {
        item.pubdate = this.formatTime(item.pubdate)
      })
      // 如果无数据
      if (res.data.data.results.length === 0) {
        this.finished = true
      } else {
        this.articleList = [...this.articleList, ...res.data.data.results]
        // 网络请求成功后，将下拉状态改为FALSE,
        // 保证下次可以继续刷新
        this.isLoading = false
        // 底部加载更多
        this.loading = false
      }
    },
    // 下拉刷新
    onRefresh () {
      // 回到下拉刷新的时候，从第一页开始
      this.page = 1
      this.articleList = []
      this.getArticlesListAPI()
    },
    // 底部加载完成
    onLoad () {
      // 加载下一页数据
      this.page++
      this.getArticlesListAPI()
    },

    // 切换频道，显示不同的额数据
    btn (channel_id) {
      // 频道页码回到1，数据从新获取
      this.page = 1
      this.articleList = []
      this.channel_id = channel_id
      this.getArticlesListAPI()
    },
    actionResult (err) {
      if (err) {

        // 反馈删除失败
      } else {
        // 删除成功
        // 1、就删除该条（万一都删了，白屏了，体体验不好）
        // 删除一条，就返回一个新的（找后台）
        // 2、删除后，重新调接口拿10条数据
        //  删除后，重新拿取第一页数据
        this.page = 1
        this.articleList = []
        this.getArticlesListAPI()
      }
    },
    // 反馈-
    async actionFn (actionObj, artId) {
      // 拉黑作者
      if (actionObj.name === '拉黑作者') {
        //  将来调用接口，判断
        // return //只要return了后面结果就不执行了
      }
      if (actionObj.name === '不感兴趣') {
        // action 不敢兴趣的对象
        const [err] = await articleDislikeAPI({
          target: artId
        })
        this.actionResult(err)
        return // 后面不执行
      }

      // 只要点击的不是不感兴趣和拉黑作者，其他的都是二级面板的内容
      const [err] = await articleReportsAPI({
        target: artId,
        type: actionObj.value

      })
      this.actionResult(err)
    },
    // 编辑频道-删除
    async editFn (arr, index) {
      this.list.splice(index, 1)
      console.log(this.list)
      // 删除了数据之后需要更新
      // 过滤掉id为0的推荐频道，把剩余数组返回
      const resultList = this.list.filter((obj) => obj.id !== 0).map((item, index) => {
        // 浅拷贝（让对象和原数组分离）
        const newObj = { ...item }

        newObj.seq = index + 1
        delete newObj.name// 删除对象的键值对
        return newObj
        // map会收集每次遍历return的值形成一个新的数组
      })
      console.log(resultList)
      // this.list.forEach((item, index) => {
      //   item.seq = index + 1
      //   delete item.name//删除对象的键值对

      // })可以把修改后的数据传到后台，但是此时改变了原数组，（少了name属性，无法铺设页面）
      const [, result] = await updateChannelListAPI({
        channels: resultList

      })
      console.log(result)
    },
    // 添加频道到用户已选频道

    async addFn (obj) {
      this.list.push(obj)
      console.log(this.list)
      // 删除了数据之后需要更新
      // 过滤掉id为0的推荐频道，把剩余数组返回
      const resultList = this.list.filter((obj) => obj.id !== 0).map((item, index) => {
        // 浅拷贝（让对象和原数组分离）
        const newObj = { ...item }

        newObj.seq = index + 1
        delete newObj.name// 删除对象的键值对
        return newObj
        // map会收集每次遍历return的值形成一个新的数组
      })
      console.log(resultList)
      // this.list.forEach((item, index) => {
      //   item.seq = index + 1
      //   delete item.name//删除对象的键值对

      // })可以把修改后的数据传到后台，但是此时改变了原数组，（少了name属性，无法铺设页面）
      const [, result] = await updateChannelListAPI({
        channels: resultList

      })
      console.log(result)
    },
    // 关闭x的弹出层
    async closePop () {
      this.show = false
      this.$refs.channels.isEdit = false
    },

    changeChannelFn (channel_id) {
      // 关闭弹出层
      this.show = false
      this.active = channel_id
      // 出现的问题：频道切换了，但是频道数据没变
      // 解决：重新请求数据
      this.page = 1
      this.channel_id = channel_id
      this.articleList = []
      this.getArticlesListAPI()
    },
    // 点击文章单元格->跳转到文章详情
    detailFn (item) {
      this.$router.push({
        path: `/art_detail?art_id=${item.art_id}`
      })
    }

  },
  computed: {
    // 未选频道，依靠所有频道数据和用户已选的频道数据
    unchannelList () {
      return this.allChannelList.filter((item) => {
        //  fifter里的return条件为true时，循环结束，返回一个新数组
        const index = this.list.findIndex((obj) => {
          //  return 条件为TRUE,返回索引，否则返回-1
          return Number(obj.id) === item.id
        }
        )
        if (index === -1) return true
        else return false
      })
    }
  }

}
</script>

<style lang="less" scoped>
.logo {
  height: 80%;
}
/deep/ .van-tabs__content {
  padding-top: 44px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
// 注意：使用组件标签，而非原生标签，不能绑定事件，除非组件上实现了了事件才可以绑定
</style>
